<template>
  <div class="home app_content">
    <div class="top">
      <div class="topRight" @click="show = true">
        <van-icon name="question-o" class="icon" />
        数据说明
      </div>
      <div class="centerInfo">
        <div class="left">
          <span class="h1">今日新增客户</span>
          <span class="h2">{{ result.custemer_add_num }}</span>
          <span class="h3">昨日: {{ result.custemer_add_num2 }}</span>
        </div>
        <div class="right">
          <span class="h1">今日流失客户</span>
          <span class="h2">{{ result.custemer_low_num }}</span>
          <span class="h3">昨日: {{ result.custemer_low_num2 }}</span>
        </div>
      </div>
      <div class="sum">
        <div class="sum_item">
          <span class="label">去重后: </span>
          {{ result.custemer_add_distinct_num }}
        </div>
        <div class="sum_item">
          <span class="label">去重后:</span
          >{{ result.custemer_add_distinct_num2 }}
        </div>
      </div>
    </div>
    <div class="centerEcharts">
      <div class="timePicker">
        <div
          v-for="item in timeList"
          :key="item.value"
          @click="checkTime(item.value)"
          class="timePicekItem"
          :class="{ active: item.value == nowChoseTime }"
        >
          <span v-if="item.value != 4">{{ item.label }}</span>
          <div v-else>
            <van-icon name="notes-o" />
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="tabEcharts">
        <van-tabs
          v-model:active="activeName"
          title-active-color="rgb(36, 117, 252)"
        >
          <van-tab title="客户总数" name="sum"></van-tab>
          <van-tab title="新增客户数" name="add"></van-tab>
          <van-tab title="流失客户数" name="lose"></van-tab>
        </van-tabs>
        <div ref="echartsRef" class="echartsRef"></div>
      </div>
      <div class="bottomTable">
        <div class="tableTitle">
          <div class="title">
            <span>获客明细</span>
            <van-checkbox :icon-size="20" v-model="check">
              <span
                style="
                  font-size: 0.37rem;
                  margin-right: 0.21rem;
                  color: #323233;
                  font-weight: 400;
                  line-height: 20px;
                "
                >是否去重</span
              ></van-checkbox
            >
          </div>
          <div class="type">
            <div
              class="typeItem"
              @click="type = 'time'"
              :class="{ active: type == 'time' }"
            >
              按日期
            </div>
            <div
              class="typeItem"
              @click="type = 'person'"
              :class="{ active: type == 'person' }"
            >
              按员工
            </div>
          </div>
        </div>
        <vtable
          :tableData="check ? tableJson.qu : tableJson.no"
          :column="option[type]"
        ></vtable>
      </div>
    </div>

    <van-dialog v-model:show="show" :show-confirm-button="false" width="300px">
      <div class="dialog">
        <p class="h1">数据说明</p>
        <p class="h2">新增客户</p>
        <p>今日加员工的用户数量</p>
        <p class="h2">流失客户</p>
        <p>今日删除员工或被员工删除的用户数量</p>
        <div class="button">
          <span @click="show = false">知道了</span>
        </div>
      </div>
    </van-dialog>
    <van-calendar
      v-model:show="timeShow"
      type="range"
      @confirm="onConfirm"
      title="选择年月日"
      :min-date="date.minDate"
      :max-date="date.maxDate"
      safe-area-inset-top
      safe-area-inset-bottom
      style="z-index: 2100"
    />
    <div v-if="loading" class="loading">
      <van-loading vertical text-color="#fff"></van-loading>
      <div style="margin-top: 10px">加载中...</div>
    </div>
  </div>
  <!-- 底部 -->
  <div class="footer_body">
    <footer-nav></footer-nav>
  </div>
</template>

<script setup name="HomeQD6">
import * as echarts from "echarts";
import moment from "moment";
import "echarts/lib/component/tooltip";
import vtable from "@/components/table/index.vue";
import { onUnmounted } from "vue";
const show = ref(false);
const result = ref({
  custemer_add_num: 0, //今日新增客户数
  custemer_add_num2: 0, //昨日新增客户数
  custemer_low_num: 0, //今日流失客户数
  custemer_low_num2: 0, //昨日流失客户数
  custemer_add_distinct_num: 0,
  custemer_add_distinct_num2: 0,
});
/**
 * 时间跨度选择
 */
const nowChoseTime = ref(0);
const timeList = [
  { label: "近7日", value: 0 },
  { label: "近30日", value: 1 },
  { label: "近三月", value: 2 },
  { label: "自定义", value: 4 },
];
const dateJson = [
  moment().subtract(6, "day").format("YYYY-MM-DD"),
  moment().subtract(29, "day").format("YYYY-MM-DD"),
  moment().subtract(2, "months").format("YYYY-MM-DD"),
];
const loading = ref(false);

const startDate = ref(moment().subtract(6, "day").format("YYYY-MM-DD"));
const endDate = ref(moment().format("YYYY-MM-DD"));
const checkTime = (value) => {
  nowChoseTime.value = value;
  if (value == 4) {
    timeShow.value = true;
  }
};
/**
 * 日期区间选择
 */
const date = {
  minDate: new Date(2020, 1, 1),
  maxDate: new Date(),
};
const timeShow = ref(false);
const onConfirm = (value) => {
  timeShow.value = false;
  startDate.value = moment(value[0]).format("YYYY-MM-DD");
  endDate.value = moment(value[1]).format("YYYY-MM-DD");
  if (type.value == "time") {
    getTableByDate();
  } else {
    getTableByName();
  }

  getEchartsData();
};

/**
 * 切换echarts
 */
const activeName = ref("sum");
const chartOption = ref();

/**
 *初始化echarts
 */
const echartsRef = ref();
const initEcharts = (data) => {
  const tabJson = { sum: "总数", add: "新增", lose: "流失" };
  const initData = JSON.parse(JSON.stringify(data));
  chartOption.value?.clear();
  chartOption.value?.dispose();
  initData.reverse();
  const xdata = initData.map((c) => c.date);
  const myChart = echarts.init(echartsRef.value);
  const option = {
    xAxis: {
      type: "category",
      data: xdata,
      axisLabel: {
        formatter(val) {
          return moment(val).format("MM.DD");
        },
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: tabJson[activeName.value],
        type: "line",
        smooth: true,
        data: initData.map((item) => item.no),
        color: "#2475fc",
      },
      {
        name: "去重",
        type: "line",
        smooth: true,
        data: initData.map((item) => item.qu),
        color: "#ffd600",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#f8fabf",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ],
              false
            ),
          },
        },
      },
    ],
    grid: {
      x: "15%", //x 偏移量
      y: "32%", // top偏移量
      width: "85%", // 宽度
      height: "55%", // 高度
      right: "15%",
    },
    tooltip: {
      trigger: "axis",
      alwaysShowContent: true,
      className: "customeTooltip",
      position: [0, 20],
      formatter: function (params) {
        // 循环处理数据，展示数据
        let htmlText = `
              <div class="left">用户统计日期: ${params[0].axisValue}</div>
              <div class="right">
                <div class="item">
                  <span style=" color: ${
                    params[0].color
                  };margin-right: 0.2rem"> -</span>
                  <span >${
                    tabJson[activeName.value]
                  }: </span><span class="value">${params[0].value}</span>
                </div>
                 <div class="item">
                  <span style=" color: ${
                    params[1].color
                  };margin-right: 0.2rem"> -</span>
                  <span >去重: </span><span class="value">${
                    params[1].value
                  }</span>
                </div>
              </div>
          `;
        return htmlText;
      },
    },
  };
  // 设置实例参数
  myChart.setOption(option);
  myChart.dispatchAction({
    type: "showTip", // 或者 'showTipFromCoord'
    seriesIndex: 0,
    dataIndex: 0,
  });
  chartOption.value = myChart;
  window.addEventListener("resize", chartOption.value.resize);
};

/**
 * 表格
 */
const check = ref(false);
const type = ref("time");

const tableJson = ref({});
const getTableByName = async () => {
  loading.value = true;
  const res = await $globalRequest(
    "/api/QD2selectTotalByName6",
    {
      startDate: startDate.value,
      endDate: endDate.value,
    },
    { method: "post" }
  );
  loading.value = false;
  const json = {
    qu: [],
    no: [],
  };
  res.map((c) => {
    json.qu.push({
      staff_name: c.staff_name,
      custemer_add_num: c.custemer_add_distinct_num,
      custemer_low_num: c.custemer_low_distinct_num,
    });
    json.no.push({
      staff_name: c.staff_name,
      custemer_add_num: c.custemer_add_num,
      custemer_low_num: c.custemer_low_num,
    });
  });
  tableJson.value = json;
};
const getTableByDate = async () => {
  loading.value = true;
  tableJson.value = [];
  const res = await $globalRequest(
    "/api/QD2selectTotalByDate6",
    {
      startDate: startDate.value,
      endDate: endDate.value,
    },
    { method: "post" }
  );
  loading.value = false;
  const json = {
    qu: [],
    no: [],
  };
  res.map((c) => {
    json.qu.push({
      date: c.date,
      custemer_sum: c.custemer_distinct_sum,
      custemer_add_num: c.custemer_add_distinct_num,
      custemer_low_num: c.custemer_low_distinct_num,
    });
    json.no.push({
      date: c.date,
      custemer_sum: c.custemer_sum,
      custemer_add_num: c.custemer_add_num,
      custemer_low_num: c.custemer_low_num,
    });
  });
  tableJson.value = json;
};
const echartsData = ref({});
const getEchartsData = async () => {
  const res = await $globalRequest(
    "/api/QD2selectTotalByDate6",
    {
      startDate: startDate.value,
      endDate: endDate.value,
    },
    { method: "post" }
  );
  const json = {
    sum: [],
    add: [],
    lose: [],
  };
  res.map((item) => {
    json.sum.push({
      no: item.custemer_sum,
      qu: item.custemer_distinct_sum,
      date: item.date,
    });
    json.add.push({
      no: item.custemer_add_num,
      qu: item.custemer_add_distinct_num,
      date: item.date,
    });
    json.lose.push({
      no: item.custemer_low_num,
      qu: item.custemer_low_distinct_num,
      date: item.date,
    });
  });
  echartsData.value = json;
  initEcharts(json[activeName.value]);
};
watch(
  () => [nowChoseTime.value],
  (val) => {
    if (val != 4) {
      endDate.value = moment().format("YYYY-MM-DD");
      startDate.value = dateJson[val];
      if (type.value == "time") {
        getTableByDate();
      } else {
        getTableByName();
      }
      getEchartsData();
    }
  },
  { immediate: true }
);
watch(
  () => type.value,
  (val) => {
    if (val == "time") {
      getTableByDate();
    } else {
      getTableByName();
    }
  }
);
watch(
  () => activeName.value,
  (val) => {
    initEcharts(echartsData.value[val]);
  }
);
document.title = "兼职4";
onUnmounted(() => {
  window.addEventListener("resize", null);
});

//获取今日昨日数据
const getTodayData = async () => {
  const res = await $globalRequest(
    "/api/QD2selectTotalByDate6",
    {
      startDate: moment().subtract(1, "day").format("YYYY-MM-DD"),
      endDate: moment().format("YYYY-MM-DD"),
    },
    { method: "post" }
  );
  res.map((c) => {
    if (c.date == moment().format("YYYY-MM-DD")) {
      result.value.custemer_add_distinct_num = c.custemer_add_distinct_num;
      result.value.custemer_add_num = c.custemer_add_num;
      result.value.custemer_low_num = c.custemer_low_num;
      result.value.custemer_add_distinct_num2 = c.custemer_low_distinct_num;
    } else {
      result.value.custemer_add_num2 = c.custemer_add_num;
      result.value.custemer_low_num2 = c.custemer_low_num;
    }
  });
};
getTodayData();

/**
 *
 */
const option = {
  time: [
    {
      label: "日期",
      prop: "date",
    },
    {
      label: "客户总数",
      prop: "custemer_sum",
    },
    {
      label: "新增数",
      prop: "custemer_add_num",
    },
    {
      label: "流失数",
      prop: "custemer_low_num",
    },
  ],
  person: [
    {
      label: "员工姓名",
      prop: "staff_name",
    },
    {
      label: "客户总数",
      prop: "custemer_add_num",
    },
    {
      label: "流失数",
      prop: "custemer_low_num",
    },
  ],
};
</script>

<style lang="less" scoped>
.home {
  min-height: 100vh;
  width: 100vw;
  background: url("@/assets/images/bg.png") no-repeat #e7eefd;
  background-size: 100% auto;
  padding-top: 0.426667rem;
  padding-bottom: 1.706667rem;
  .top {
    margin: 0 0.426667rem;
    border-top-left-radius: 0.213333rem;
    border-top-right-radius: 0.213333rem;
    height: 3.333333rem;
    background-image: url("@/assets/images/top-num.png");
    background-position: 0 0;
    background-size: 100% 4rem;
    position: relative;
    .topRight {
      position: absolute;
      top: 0;
      right: 0;
      width: 2.186667rem;
      height: 0.693333rem;
      background-image: url("@/assets/images/topRightBg.png");
      background-size: 100% 100%;
      background-position: 0 0;
      font-size: 0.32rem;
      font-weight: 400;
      color: #c4d2ff;
      line-height: 0.48rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        width: 0.32rem;
        height: 0.32rem;
        color: white;
        margin-right: 0.08rem;
      }
    }
    .centerInfo {
      display: flex;
      height: 2.506667rem;
      box-sizing: border-box;
      padding-top: 0.64rem;
      padding-left: 0.64rem;
      .left,
      .right {
        width: 50%;
        display: flex;
        flex-direction: column;
        .h1 {
          font-size: 0.373333rem;
          font-weight: 400;
          color: #d9e2fd;
          line-height: 0.533333rem;
        }
        .h2 {
          font-size: 0.533333rem;
          font-weight: 500;
          color: #f5f8fe;
          line-height: 0.693333rem;
          margin-top: 0.053333rem;
        }
        .h3 {
          font-size: 0.32rem;
          font-weight: 400;
          color: #becefd;
        }
      }
    }
    .sum {
      height: 0.906667rem;
      display: flex;
      padding-left: 0.64rem;
      justify-content: center;
      .sum_item {
        height: 100%;
        width: 50%;
        font-size: 0.32rem;
        line-height: 0.48rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        color: #d9e2fd;
        .label {
          font-weight: 400;
          color: #c0cffd;
        }
      }
    }
  }
  .centerEcharts {
    background: #e7eefd;
    -webkit-box-shadow: 0px -0.213333rem 0.32rem 0px rgba(30, 44, 75, 0.12);
    box-shadow: 0px -0.213333rem 0.32rem 0px rgba(30, 44, 75, 0.12);
    border-top-left-radius: 0.213333rem;
    border-top-right-radius: 0.213333rem;
    padding: 0.32rem;
    .timePicker {
      border-radius: 0.106667rem;
      background: #d5def2;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .timePicekItem {
        padding: 0 0.213333rem;
        text-align: center;
        font-size: 0.32rem;
        color: #676e7a;
        line-height: 0.693333rem;
        &.active {
          color: #2475fc;
          background: #fff;
          font-weight: 600;
          transition: all 0.3s;
          border-radius: 0.106667rem;
        }
      }
    }
    .tabEcharts {
      margin-top: 0.32rem;
      background-color: #fff;
      padding: 0 10px;
      height: 100%;
      overflow: auto;
      border-radius: 0.213333rem;
    }
    .echartsRef {
      width: 8.72rem;
      height: 8.55rem;
      overflow: hidden;
    }
  }
  .bottomTable {
    background: #fff;
    padding: 0.213333rem 10px;
    .tableTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        display: flex;
        align-items: center;
        span {
          font-size: 0.373333rem;
          font-weight: 600;
          color: #000000;
          line-height: 0.533333rem;
          margin-right: 0.21rem;
        }
      }
      .type {
        border-radius: 0.106667rem;
        height: 0.693333rem;
        width: 2.933333rem;
        background: #ebeff5;
        display: flex;
        margin-bottom: 0.213333rem;
        .typeItem {
          width: 50%;
          font-size: 0.32rem;
          font-weight: 400;
          color: #676e7a;
          line-height: 0.693333rem;
          height: 0.693333rem;
          text-align: center;
          &.active {
            font-weight: 600;
            color: #2475fc;
            background: #f2f7ff;
          }
        }
      }
    }
  }

  .dialog {
    width: 100%;
    box-sizing: border-box;
    padding: 0.426667rem 0.64rem;
    background: #ffffff;
    .h1 {
      font-size: 0.426667rem;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 0.586667rem;
    }
    .h2 {
      font-size: 0.373333rem;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 0.44rem;
    }
    p {
      font-size: 0.373333rem;
      font-weight: 400;
      color: #666666;
      line-height: 0.533333rem;
      margin-top: 0.106667rem;
    }
    .button {
      margin-top: 0.853333rem;
      text-align: right;
      span {
        font-size: 0.373333rem;
        font-weight: 400;
        color: #2475fc;
        line-height: 0.44rem;
      }
    }
  }
}
</style>
<style lang="less">
.customeTooltip {
  width: 8.72rem;
  height: 1.33333rem;
  border-radius: 0.106667rem !important;
  box-sizing: border-box;
  background: rgb(242, 247, 255) !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 0 0 !important;
  font-size: 0.32rem !important;
  font-weight: 500;
  color: #676e7a;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0.85rem !important;
  line-height: 0.48rem;
  z-index: 2000 !important;

  .right {
    display: flex;
    height: 100%;
    flex-direction: column;
    .item {
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .value {
      color: #14161a;
      font-weight: 550;
    }
  }
}
.loading {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.4rem;
  transform: translate(-50%, -50%);
}
</style>
